Django3.0,Vue前后端分离以及访问静态资源的问题 | 您所在的位置:网站首页 › Django 静态文件 › Django3.0,Vue前后端分离以及访问静态资源的问题 |
在django目录下创建vue项目
在django项目根目录下运行 vue create myblog 创建一个vue项目myblog 将vue项目打包将编写完成后的vue项目打包npm run build 会在myblog下创建一个dist文件夹,vue文件就在里面,(是需要安装好vue 和 vue cli的) vue cli 3.0+打包后,dist目录下没有static目录,而Django那边的静态资源配置只认static,所以打包之需要新建一个vue.config.js文件 ,在里面加上一段代码将静态文件放入static文件夹中 module.exports = { assetsDir: 'static' }或者使用vue ui命令,配置项目的资源路径为static会自动创建vue.config.js文件 完成后的目录结构 将django 的 TEMPLATES 下的DIRS 修改为 os.path.join(BASE_DIR, ‘myblog/dist’) ,将模板文件指向myblog/dist文件下,页面就是dist下的文件了 然后添加一个TIATICFILES_DIRS, 映射静态文件的路径 修改urls.py文件,将根路径指向dist下的index.html文件 运行 python .\manage.py runserver 访问http://localhost:8080/,页面显示就是vue的页面了 因为django只调用static目录下的静态文件,其他地方的文件就调用不了,这儿的favicon.ico就找不到,放到static目录下就能调用了。 |
CopyRight 2018-2019 实验室设备网 版权所有 |